<template>
  <view class="order-appeal-modal">
    <up-popup v-model:show="show" overlay safeAreaInsetBottom safeAreaInsetTop mode="bottom" touchable maxHeight="'80%'"
      closeable closeOnClickOverlay @close="close" @open="open">
      <view class="modal-content">
        <view class="modal-header">
          <view class="modal-title">申诉详情表</view>
        </view>

        <up-steps current="10" direction="column">
          <!-- 给desc添加递增时间 -->
          <up-steps-item error title="申诉失败" desc="2023-08-01 10:30"></up-steps-item>
          <up-steps-item error title="申诉失败" desc="2023-08-01 10:35"></up-steps-item>
          <up-steps-item error title="申诉失败" desc="2023-08-01 11:40"></up-steps-item>
          <up-steps-item error title="申诉失败" desc="2023-08-01 11:45"></up-steps-item>
          <up-steps-item error title="申诉失败" desc="2023-08-01 12:40"></up-steps-item>
          <up-steps-item error title="申诉失败" desc="2023-08-01 13:40"></up-steps-item>
          <up-steps-item error title="申诉失败" desc="2023-08-01 14:40"></up-steps-item>
          <up-steps-item error title="申诉失败" desc="2023-08-01 18:40">
            <template #content>
              <text class="appeal-processor">张三</text>
              <text class="appeal-title">2023-08-01 18:40</text>
              <text class="appeal-desc">申诉需要添加申诉内容</text>
            </template>
          </up-steps-item>
          <up-steps-item title="申诉成功" desc="2023-08-02 11:00"></up-steps-item>
        </up-steps>
      </view>
    </up-popup>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
defineOptions({ name: "OrderAppealModal" });
const show = defineModel<boolean>("show", { default: false });

// 定义方法  

const open = () => {
  show.value = true;
}

const close = () => {
  show.value = false;
}  
</script>

<style scoped lang="scss">
.order-appeal-modal {
  .modal-header {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }

  .modal-content {
    padding: 20rpx;

    .appeal-processor {
      font-size: 24rpx;
      color: #606266;
    }
    .appeal-title {
      font-size: 24rpx;
      color: #909193;
    }
    .appeal-desc {
      font-size: 26rpx;
      color: #606266;
    }
  }
}
</style>
